<!--企业用户组管理/设置-->
<template>
  <div class="userGroupSet">
    <el-container>
      <el-header class="header">
        <div>
          <div class="title">{{ rowInfo.companyName }}</div>
          <div class="companyType">{{ rowInfo.companyTypeStr }}</div>
          <div class="companyType">当前用户组：{{ rowInfo.authGroupName }}</div>
        </div>
        <div>
          <el-button type="primary" icon="el-icon-edit" @click="editUserGroup"
            >编辑</el-button
          >
          <el-button
            v-show="companyGroupStatus === 1"
            type="primary"
            icon="el-icon-setting"
            @click="updateGroupStatus(2)"
          >
            停用
          </el-button>
          <el-button
            v-show="companyGroupStatus === 2"
            type="primary"
            icon="el-icon-setting"
            @click="updateGroupStatus(1)"
          >
            启用
          </el-button>
          <!-- <el-button
            v-show="companyGroupStatus === 1"
            type="primary"
            icon="el-icon-setting"
            @click="updateGroupStatus(3)"
          >
            冻结
          </el-button> -->
          <el-button
            v-show="companyGroupStatus === 3"
            type="primary"
            icon="el-icon-setting"
            @click="updateGroupStatus(1)"
          >
            解冻
          </el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            @click="deleteUserGroup"
            >删除</el-button
          >
        </div>
      </el-header>
      <el-main>
        <el-tabs v-model="activeName">
          <el-tab-pane label="子系统权限" name="first" class="first">
            <el-checkbox-group v-model="checkList">
              <div v-for="(item, index) in checkData" :key="index">
                <div class="title">{{ item.appGroupName }}</div>
                <el-checkbox
                  v-for="(item2, index2) in checkData[index].appList"
                  :key="index2"
                  disabled
                  :label="`${item2.appName}`"
                ></el-checkbox>
              </div>
            </el-checkbox-group>
            <el-form
              :model="appGroupForm"
              :rules="appGroupRules"
              ref="appGroupForm"
              label-width="120"
              class="demo-ruleForm"
              disabled
            >
              <el-form-item label="备注信息：">
                <el-input
                  type="textarea"
                  v-model="appGroupForm.remarkApp"
                ></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="操作权限" name="second">
            <el-form
              :model="groupResourceForm"
              ref="groupResourceForm"
              label-width="120"
              class="demo-ruleForm"
            >
              <el-form-item label="子系统">
                <el-select
                  v-model="groupResourceForm.appId"
                  placeholder="请选择子系统"
                  @change="changeSystem"
                >
                  <el-option
                    v-for="item in groupResourceAppArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <el-tree
              ref="menuTree"
              class="tree-box"
              :data="treeData"
              :props="{label: 'resourceName'}"
              node-key="id"
              check-strictly
              show-checkbox
              default-expand-all
              highlight-current
              :render-content="renderContent"
              :expand-on-click-node="false"
              v-loading="treeLoading"
            />
          </el-tab-pane>
          <el-tab-pane label="数据权限" name="third" class="third">
            <ul>
              <li>
                <el-radio v-model="radio" label="6" disabled>
                  <span class="groupDataType">个人</span>
                  <span>只能操作自己的数据</span>
                </el-radio>
              </li>
              <li>
                <el-radio v-model="radio" label="5" disabled>
                  <span class="groupDataType">所属岗位</span>
                  <span>能操作自己所属同级岗位的数据</span>
                </el-radio>
              </li>
              <li>
                <el-radio v-model="radio" label="4" disabled>
                  <span class="groupDataType">所属岗位及下级岗位</span>
                  <span>能操作自己、下属岗位、和自己同级属位的数据</span>
                </el-radio>
              </li>
              <li>
                <el-radio v-model="radio" label="3" disabled>
                  <span class="groupDataType">所属部门</span>
                  <span>能操作自己、下属、和自己所属部门的数据</span>
                </el-radio>
              </li>
              <li>
                <el-radio v-model="radio" label="2" disabled>
                  <span class="groupDataType">所属部门及下属部门</span>
                  <span
                    >所属部门及下属部门
                    能操作自己、下属和自己所属部门及其子部门的数据</span
                  >
                </el-radio>
              </li>
              <li>
                <el-radio v-model="radio" label="1" disabled>
                  <span class="groupDataType">全公司</span>
                  <span>能操作全公司的数据</span>
                </el-radio>
              </li>
            </ul>
            <el-form
              :model="groupDataForm"
              :rules="groupDataRules"
              ref="groupDataForm"
              label-width="100px"
              class="demo-ruleForm"
              disabled
            >
              <el-form-item label="备注信息：">
                <el-input
                  type="textarea"
                  v-model="groupDataForm.remarkData"
                ></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <el-dialog
          title="编辑用户组"
          :visible.sync="dialogVisibleEdit"
          class="dialog-box"
          width="30%"
          @close="resetUserGroupForm"
        >
          <el-form
            ref="editForm"
            :model="editForm"
            label-width="100px"
            :rules="editFormRules"
            class="dialog-box"
          >
            <el-form-item label="已选企业" prop="companyName">
              <el-input
                v-model="editForm.companyName"
                placeholder="请输入"
                clearable
                disabled
                maxlength="16"
              />
            </el-form-item>
            <el-form-item label="修改用户组" prop="authGroupId">
              <el-select v-model="editForm.authGroupId" placeholder="请选择">
                <el-option
                  v-for="(item, index) in groupList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="原因备注" prop="remark">
              <el-input
                type="textarea"
                v-model="editForm.remark"
                placeholder="请输入原因备注"
                rows="4"
              />
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click.stop="cancelEditCompanyGroup">取消</el-button>
            <el-button
              type="primary"
              @click.stop="submitEditForm"
              :loading="addUserLoading"
              >确定</el-button
            >
          </span>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import {companyTypeData, defaultConfigData} from './const.js'
import {
  authGroupGetAuthGroupApp, // 查询用户组子系统权限列表
  authGroupUpdateAuthGroupApp, // 跟新用户组子系统权限列表
  authGroupGetById, // 根据ID查询用户组
  authGroupUpdate, // 编辑用户组状态
  authGroupGetAuthGroupData, // 查询用户组数据权限
  authGroupUpdateAuthGroupData, // 保存用户组数据权限
  getAppListByAuthGroupId, // 根据用户组查询绑定的子系统列表
  authGroupGetAuthGroupResource, // 查询用户组菜单权限列表
  authGroupUpdateAuthGroupResource, // 保存用户组菜单权限
  pageListAuthGroupCompany, // 分页查询用户组企业列表
  updateAuthGroupCompanyStatus, // 修改用户组企业状态
  getAuthGroupCompanyById, // 根据rowid查询企业用户组信息
  updateAuthGroupCompanyBatch, // 批量更新企业所属用户组
  updateAuthGroupCompany, // 更新企业所属用户组
  getAuthGroupList, // 用户组list
  authGroupDeleteById // 根据ID删除用户组
} from '@const/api_staffCenter.js'
import {hasIn} from 'lodash'
export default {
  name: 'companyGroupSet',
  data() {
    return {
      activeName: 'first',
      checkList: [],
      checkData: [],
      radio: '',
      groupDataForm: {
        remarkData: ''
      },
      groupDataRules: {
        remarkData: [
          {required: true, message: '请输入备注信息', trigger: 'blur'}
        ]
      },
      appGroupForm: {
        remarkApp: '',
        remarkData: ''
      },
      appGroupRules: {
        remarkData: [
          {required: true, message: '请输入备注信息', trigger: 'blur'}
        ]
      },
      groupResourceForm: {
        appId: ''
      },
      groupResourceAppArr: [],
      treeData: [],
      dialogVisibleEdit: false,
      companyGroupStatus: '',
      editForm: {
        companyName: '',
        authGroupId: '',
        remark: '',
        id: ''
      },
      editFormRules: {
        companyName: [{required: true, message: '请输入', trigger: 'blur'}],
        status: [{required: true, message: '请选择', trigger: 'blur'}],
        authGroupId: [{required: true, message: '请选择', trigger: 'change'}]
      },
      companyTypeData,
      defaultConfigData,
      addUserLoading: false,
      setCheckedKeys: [],
      rowInfo: {},
      groupList: [],
      treeLoading: false
    }
  },
  mounted() {
    this.getGroupApp()
    this.getGroupData()
    this.getAppList()
    this.getCompanyGroupByRowId()
    this.getCompanyGroupList()
  },
  methods: {
    // 根据rowid查询企业用户组信息
    getCompanyGroupByRowId() {
      this.$axios({
        method: 'GET',
        url: `${getAuthGroupCompanyById}?id=${this.$route.query.rowId}`
      })
        .then(res => {
          if (res.data.code === '0') {
            let data = hasIn(res, ['data', 'payload']) ? res.data.payload : {}
            this.rowInfo = data
            this.editForm = {
              companyName: data.companyName,
              authGroupId: data.authGroupId,
              remark: data.remark,
              id: data.id,
              companyId: data.companyId
            }
            this.companyGroupStatus = data.status
          }
        })
        .finally(() => {})
    },
    getCompanyGroupList() {
      this.$axios({
        method: 'GET',
        url: getAuthGroupList
      })
        .then(res => {
          let data = hasIn(res, ['data', 'payload']) ? res.data.payload : []
          this.groupList = data
        })
        .finally(() => {})
    },
    // 编辑企业用户组
    editUserGroup() {
      this.getCompanyGroupByRowId()
      this.dialogVisibleEdit = true
    },
    cancelEditCompanyGroup() {
      this.dialogVisibleEdit = false
    },
    // 提交编辑用户组
    submitEditForm() {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          this.addUserLoading = true
          this.$axios({
            method: 'post',
            url: updateAuthGroupCompany,
            data: {
              id: this.editForm.id,
              authGroupId: this.editForm.authGroupId,
              remark: this.editForm.remark
            }
          })
            .then(() => {
              this.getCompanyGroupByRowId()
              this.dialogVisibleEdit = false
              this.$message.success('修改成功')
            })
            .finally(() => {
              this.addUserLoading = false
            })
        } else {
          return false
        }
      })
    },
    // 删除用户组
    deleteUserGroup() {
      this.$confirm('此操作将删除当前用户组, 是否继续?', '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.deleteGroupById()
        })
        .catch(res => {
          console.log(res)
        })
    },
    // 根据id删除用户组
    deleteGroupById() {
      this.$axios({
        method: 'POST',
        url: authGroupDeleteById,
        data: {id: this.$route.query.id}
      })
        .then(res => {
          if (res.data.code === '0') {
            this.$message.success('删除成功')
            this.$router.go(-1)
          }
        })
        .finally(() => {})
    },
    // 更新用户组状态
    updateGroupStatus(status) {
      this.$axios({
        method: 'POST',
        url: updateAuthGroupCompanyStatus,
        data: {
          id: this.editForm.id,
          status: status
        }
      })
        .then(res => {
          if (res.data.code === '0') {
            this.$message.success('操作成功')
            this.getCompanyGroupByRowId()
          }
        })
        .finally(() => {})
    },
    resetUserGroupForm() {
      this.$refs.editForm.resetFields()
    },
    // 子系统权限
    getGroupApp() {
      this.$axios({
        method: 'GET',
        url: `${authGroupGetAuthGroupApp}?authGroupId=${this.$route.query.id}`
      })
        .then(res => {
          let data = hasIn(res, ['data', 'payload']) ? res.data.payload : []
          this.checkData = data
          data.forEach(item => {
            if (item.appList && item.appList.length > 0) {
              item.appList.forEach(item2 => {
                if (item2.selected) {
                  this.checkList.push(item2.appName)
                }
              })
            }
          })
        })
        .finally(() => {})
    },
    // 根据用户组id查询子系统列表
    getAppList() {
      this.$axios({
        method: 'GET',
        url: `${getAppListByAuthGroupId}?authGroupId=${this.$route.query.id}`
      })
        .then(res => {
          let data = hasIn(res, ['data', 'payload']) ? res.data.payload : []
          data.forEach(item => {
            let obj = {
              value: item.id,
              label: item.appName
            }
            this.groupResourceAppArr.push(obj)
          })
        })
        .finally(() => {})
    },
    // 选中的菜单/禁用菜单
    selectedGroupResource(data) {
      data.forEach(item => {
        if (item.selected) {
          this.setCheckedKeys.push(item.id)
          this.$refs.menuTree.setCheckedKeys(this.setCheckedKeys)
          if (item.resourceType !== 2) {
            this.setCheckedKeys.push('0')
            this.$refs.menuTree.setCheckedKeys(this.setCheckedKeys)
          }
        }
        item.disabled = true
        if (item.children && item.children.length > 0) {
          this.selectedGroupResource(item.children)
        }
      })
    },
    changeSystem(val) {
      this.getGroupResource()
    },
    // 菜单权限
    getGroupResource() {
      this.treeLoading = true
      this.$axios({
        method: 'GET',
        url: `${authGroupGetAuthGroupResource}?authGroupId=${this.$route.query.id}&appId=${this.groupResourceForm.appId}`
      })
        .then(res => {
          this.$refs.menuTree.setCheckedKeys([])
          let treeData = hasIn(res, ['data', 'payload']) ? res.data.payload : []
          this.pushTree(treeData)
          this.setCheckedKeys = []
          this.selectedGroupResource(this.treeData)
        })
        .finally(() => {
          this.treeLoading = false
        })
    },
    // 拼接数据结构
    pushTree(arr) {
      let label = ''
      this.groupResourceAppArr.forEach(item => {
        if (this.groupResourceForm.appId === item.value) {
          label = item.label
        }
      })
      this.treeData = [
        {resourceName: label, id: '0', selected: false, children: arr}
      ]
    },
    renderContent(h, {node, data}) {
      if ((data.children && data.children.length) || !data.id) {
        return (
          <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
            <span>
              <span style="margin-right:10px;">{node.label}</span>
              {node.data.resourceType == '1' ||
              node.data.resourceType == '3' ? (
                <el-tag size="mini">菜单</el-tag>
              ) : (
                <el-tag type="success" size="mini">
                  系统
                </el-tag>
              )}
            </span>
          </span>
        )
      } else {
        return (
          <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
            <span>
              <span style="margin-right:10px;">{node.label}</span>
              {node.data.resourceType == '1' ? (
                <el-tag size="mini">菜单</el-tag>
              ) : (
                ''
              )}
              {node.data.resourceType == '2' ? (
                <el-tag size="mini" type="warning">
                  按钮
                </el-tag>
              ) : (
                ''
              )}
              {node.data.resourceType == '3' ? (
                <el-tag size="mini">菜单</el-tag>
              ) : (
                ''
              )}
            </span>
          </span>
        )
      }
    },
    // 数据权限
    getGroupData() {
      this.$axios({
        method: 'GET',
        url: `${authGroupGetAuthGroupData}?authGroupId=${this.$route.query.id}`
      })
        .then(res => {
          let data = hasIn(res, ['data', 'payload']) ? res.data.payload : {}
          this.radio = data.dataAuth.toString()
          this.appGroupForm.remarkApp = data.remarkApp
          this.groupDataForm.remarkData = data.remarkData
        })
        .finally(() => {})
    }
  }
}
</script>
<style lang="less">
.userGroupSet {
  display: flex;
  flex-direction: column;
  .header {
    display: flex;
    justify-content: space-between;
    .title {
      font-size: 16px;
      font-weight: bold;
    }
  }
  .save {
    display: flex;
    justify-content: flex-end;
  }
  .first {
    .title {
      font-size: 16px;
      border-bottom: 1px solid #e4e7ed;
      margin-top: 30px;
    }
    .demo-ruleForm {
      margin-top: 30px;
    }
  }
  .third {
    li {
      list-style-type: none;
      .groupDataType {
        width: 150px;
        display: inline-block;
        padding: 10px 0;
      }
    }
  }
  .dialog-box {
    .el-input--medium {
      width: 100%;
    }
    .el-select--medium {
      width: 100%;
    }
  }
  .el-table {
    flex: 1;
  }
}
</style>
